<formjs>
	<div if={!isSubmited}>
		<div each={fromItem in opts.form}>
			<div class="weui-cells__title">{fromItem.label}</div>
			<div class="weui-cells" if={fromItem.type == 'text'}>
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" name='{fromItem.name}' placeholder="{form.placeholder}">
					</div>
				</div>
			</div>
			<div class="weui-cells weui-cell_select" if={fromItem.type == 'select'}>
				<div class="weui-cell__bd">
					<select class="weui-select" name="{fromItem.name}">
						<option value="{optionItem.value}" each={optionItem in fromItem.select.option}>{optionItem.text}</option>
					</select>
				</div>
			</div>
			<div class="weui-cells weui-cells_checkbox" if={fromItem.type == 'checkbox'}>
				<label class="weui-cell weui-check__label" for="{fromItem.name}_{checkboxItem.value}" each={checkboxItem in fromItem.checkbox}>
					<div class="weui-cell__hd">
						<input type="checkbox" class="weui-check" name="{fromItem.name}" id="{fromItem.name}_{checkboxItem.value}">
						<i class="weui-icon-checked"></i>
					</div>
					<div class="weui-cell__bd">
						<p>{checkboxItem.text}</p>
					</div>
				</label>
			</div>
			<div class="weui-cells weui-cells_radio" if={fromItem.type == 'radio'}>
				<label class="weui-cell weui-check__label" for="{fromItem.name}_{radioItem.value}" each={radioItem in fromItem.radio}>
					<div class="weui-cell__bd">{radioItem.text}</div>
					<div class="weui-cell__ft">
						<input type="radio" class="weui-check" name="{fromItem.name}" value="{radioItem.value}" id="{fromItem.name}_{radioItem.value}">
						<span class="weui-icon-checked"></span>
					</div>
				</label>
			</div>
			<div class="weui-cells weui-cells_form" if={fromItem.type == 'textarea'}>
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<textarea class="weui-textarea" placeholder="{form.placeholder}" rows="2"></textarea>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-btn-area">
			<a href="javascript:" class={"weui-btn weui-btn_mini weui-btn_primary submit-btn":true,"weui-btn_loading":isSubmiting} onclick={submitClick}>
				<i class="weui-loading" if={isSubmiting}></i> 提交
			</a>
		</div>
	</div>
	<div if={isSubmited}>
		<div class="weui-msg">
	        <div class="weui-msg__icon-area">
	        	<i class="weui-icon-success weui-icon_msg"></i>
	        </div>
	        <div class="weui-msg__text-area">
	            <h2 class="weui-msg__title">操作成功</h2>
	            <p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现</p>
	        </div>
	    </div>
	</div>
</div>
<script>
	let tag = this;

	tag.submitClick = function(){
		tag.isSubmiting = true;
		tag.update();
		setTimeout(function(){
			tag.submitSuccess();
		}, 3000);
	};
	tag.submitSuccess = function(){
		tag.isSubmited = true;
		tag.update();
	}
</script>

<style>
	:scope{
		display: block;
		width: calc(100vw - 8.8rem);
		font-size: 0.85rem;
	}
	:scope .weui-cells__title{
		margin-top:0;
		margin-bottom:0;
		padding: 0.25rem;
		background-color: #ededed;
		font-size: 0.85rem;
	}
	:scope .weui-cells, :scope .weui-cells_checkbox .weui-icon-checked:before, :scope .weui-cells_radio .weui-check:checked + .weui-icon-checked:before{
		font-size: 0.85rem;
	}
	:scope .weui-cell__bd p{
		margin-bottom:0!important;
	}
	:scope .weui-select{
		height: 2.5rem;
		line-height:2.5rem;
	}
	:scope .submit-btn{
		display: block;
	}
	:scope .weui-icon_msg{
		font-size: 4rem;
	}
	:scope .weui-msg__title{
		font-size: 1.25rem;
	}
	:scope .weui-msg__desc{
		font-size: 0.85rem;
	}
	:scope .weui-msg__icon-area{
		margin-bottom: 1.5rem;
	}
	:scope .weui-msg{
		padding-top: 1.5rem;
	}
	:scope .weui-msg__text-area{
		margin-bottom:0;
	}
</style>
</formjs>